<template>
  <div class="uploadImg">
    <h1>mand</h1>
    <div class="md-example-child md-example-child-reader md-example-child-reader-0">
      <ul class="image-reader-list">
        <li class="image-reader-item" v-for="(img, index) in imageList['reader']" :key="index" :style="{
            'backgroundImage': `url(${img})`,
            'backgroundPosition': 'center center',
            'backgroundRepeat': 'no-repeat',
            'backgroundSize': 'cover'
            }">
          <md-tag class="image-reader-item-del" size="small" shape="quarter" fill-color="#111A34" type="fill"
            font-color="#fff" @click.native="onDeleteImage('reader', index)">
            <md-icon name="close"></md-icon>
          </md-tag>
        </li>
        <li class="image-reader-item add">
          <md-image-reader name="reader" @select="onReaderSelect" @complete="onReaderComplete" @error="onReaderError"
            is-multiple></md-image-reader>
          <!-- <md-icon name="camera" size="md" color="#CCC"></md-icon> -->
          <p>添加图片</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {
    Icon,
    ImageReader,
    Tag,
    Toast
  } from 'mand-mobile'
  import imageProcessor from 'mand-mobile/components/image-reader/image-processor'
  export default {
    name: 'image-reader-demo',
    components: {
      [Icon.name]: Icon,
      [ImageReader.name]: ImageReader,
      [Tag.name]: Tag,
    },
    data() {
      return {
        imageList: {
          reader: [],
        },
      }
    },
    methods: {
      onReaderSelect(name, {
        files
      }) {
        Toast.loading('图片处理中...')
      },
      onReaderComplete(name, {
        dataUrl,
        file
      }) {
        let _this = this //这里的this 是把img的对象指向改变为_this
        imageProcessor({
          dataUrl,
          width: 800,
          height: 800,
          quality: 0.7,
        }).then(({
          dataUrl,
          blob
        }) => {
          Toast.hide()
          console.log('dataUrl' + dataUrl)
          console.log('blob' + blob)
          const imageList = _this.imageList[name] || []
          imageList.push(dataUrl)
          _this.$set(_this.imageList, name, imageList)
        })
      },
      onReaderError(name, {
        msg
      }) {
        Toast.failed(msg)
      },
      onDeleteImage(name, index) {
        const imageList = this.imageList[name] || []
        imageList.splice(index, 1)
        this.$set(this.imageList, name, imageList)
      },
    },
  }
</script>

<style lang="less" scoped>
  .uploadImg {
    ul.image-reader-list {
      margin: auto;
      padding: 0;
      display: flex;

      li.image-reader-item {
        height: 200px;
        width: 200px;
        position: relative;
        text-align: center;
        line-height: 200px;
        border: 1px solid #dddddd;

        p {
          margin: 0;
          padding: 0;
        }

        .image-reader-item-del {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
</style>